<template>
  <div>
    <button @click="start">浪起来</button>
    <button @click="stop">停止</button>
    <h3>{{ msg }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: " 我拿Buff,谢谢~",
      intervalId: null,
    };
  },
  methods: {
    start() {
      if (this.intervalId !== null) return
      this.intervalId = setInterval(() => {
        const head = this.msg.slice(0, 1);
        const body = this.msg.slice(1);
        this.msg = body + head;
      }, 500);
    },
    stop() {
      clearInterval(this.intervalId);
      this.intervalId = null;
    },
  },
};
</script>

<style scoped>
button {
  margin-left: 5px;
}
</style>
